import { WingBlank, WhiteSpace, Button } from 'antd-mobile'
import router from 'umi/router'
import styles from './index.scss'
import { Checkbox } from 'antd'

const business = () => {
  return (
    <div className={styles.business}>
      <WingBlank size="lg">
        <WhiteSpace />
        <h3>请根据您所办理的事务选择办事业务</h3>
        <WhiteSpace />
        <Block title='社保业务 - 综合受理' desc='办理注意事项：记得带好社保证件及相关资料到大厅具体事宜待定' data={Array.from(new Array(9))} />
        <Block title='社保业务 - 综合查询' desc='办理注意事项：记得带好社保证件及相关资料到大厅具体事宜待定' data={Array.from(new Array(3))} />
        <WhiteSpace />
        <Button type='primary' onClick={() => router.push(`/result`)}>下一步</Button>
      </WingBlank>
    </div>
  )
}

const Block = ({ title, desc, data = [] }) => {
  return (
    <div className={styles.box}>
      <p>{title}</p>
      <p className='desc'>{desc}</p>
      <div className={styles.checkGroup}>
        {
          data.map((i, index) => {
            return (
              <CheckComponent key={index} />
            )
          })
        }
      </div>
    </div>
  )
}

const CheckComponent = () => {
  return (
    <Checkbox className={styles.check}>登记业务（33人）</Checkbox>
  )
}


export default business
